<template>
  <div class="cell_box">
    <ul>
      <li :class="{'islink': islink}" v-for="item in data" @click="showPdf(item)" :key="item.id">
        <div class="flex">
          <div class="cell_box-date" v-if="item.date">{{ item.date }}</div>
          <div class="cell_box-value ellipsis-2">{{ item.templateName }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    islink: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showPdf(item) {
      this.$router.push({
        path: `${this.global.publicPath}/showPdf`,
        query: { url: window.btoa(item.templateUrl), title: item.templateName }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.cell_box{
  ul li{
    padding-right: 15px;
    position: relative;
    &>div {
      line-height: 20px;
      padding: 13px 0;
      .cell_box-date{
        width: 4em;
        font-size: 14px;
        color: #999;
      }
      .cell_box-value{
        flex: 1;
        font-size: 14px;
        color: #333;
      }
    }
    &:not(:last-child){
      &>div{
        .rem1pxB(@-color-br-light, 0, 1px);
      }
    }
  }
}
</style>